<template>
    <!-- 用户信息 -->
    <div class="box">
        <div class="tops">
            <div style=" width: 20%;height: 100%; font-size: 17px;margin: 0.75% 0 0 1%;">
                <i class="el-icon-s-home"></i>
                <span>首页</span>
                <span>></span>
                <span>用户信息管理</span>
            </div>
            <div style="float: right; margin: 0.5% 1% 0 0;">
                <!-- <el-button type="primary" icon="el-icon-plus" size="small">添加</el-button> -->
                <el-button @click="deletes" type="primary" icon="el-icon-delete" size="small">删除</el-button>
                <el-button @click="refresh" type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
                <!-- <el-button type="primary" icon="el-icon-folder-opened" size="small">导出</el-button> -->
            </div>
        </div>
        <el-container>
            <el-header>
                <el-form label-width="120px" v-model="searchModel">
                    <el-row type="flex" :gutter="0" justify="start" align="top">
                        <!-- <el-col :span="6">
                            <el-form-item label="注册时间">
                                <el-date-picker v-model="searchModel.time" value-format="yyyy-MM-dd" type="date"
                                    placeholder="注册时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="6" style="margin:0 0 0 10%;">
                            <el-form-item label="用户姓名">
                                <el-input v-model="searchModel.name" placeholder="请输入用户姓名" size="medium" clearable
                                    filterable ref="optionsCompany">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" style="margin:0 0 0 10%;">
                            <el-form-item label="用户编号">
                                <el-input v-model="searchModel.id" placeholder="请输入用户编号" size="medium" clearable
                                    filterable ref="optionsCompany">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" style="margin: 0.3% 0 0 10%;">
                            <el-button @click="queryForm" type="primary" size="small">查询</el-button>
                            <el-button @click="resetForm" size="small">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-header>
            <el-container>
                <el-aside>
                    <el-menu default-active="1-1" class="el-menu-vertical" @open="handleOpen" @close="handleClose"
                        @select="selects" :collapse="isCollapse">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-user"></i>
                                <span slot="title">性别</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">全部</el-menu-item>
                                <el-menu-item index="1-2">男</el-menu-item>
                                <el-menu-item index="1-3">女</el-menu-item>
                                <el-menu-item index="1-4">保密</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-document-copy"></i>
                                <span slot="title">证件类型</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1">全部</el-menu-item>
                                <el-menu-item index="2-2">居民身份证</el-menu-item>
                                <el-menu-item index="2-3">护照</el-menu-item>
                                <el-menu-item index="2-4">户口本</el-menu-item>
                                <el-menu-item index="2-5">驾驶证</el-menu-item>
                                <el-menu-item index="2-6">其他</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                    <div @click="shrinkMenu" class="shrink">
                        <i :class="isCollapse ? 'el-icon-arrow-right': 'el-icon-arrow-left'"></i>
                    </div>
                </el-aside>

                <el-main>
                    <el-table ref="multipleTable"
                        :data="tableData.slice((pageInfo.page-1)*pageInfo.pageSize,pageInfo.page*pageInfo.pageSize)"
                        tooltip-effect="dark" style="width: 100%" border height="93.5%"
                        :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="45" fixed="left" />
                        <el-table-column type="index" width="50" label="序号" />
                        <el-table-column prop="id" label="编号" :show-overflow-tooltip="true" width="120" />
                        <el-table-column prop="name" label="姓名" :show-overflow-tooltip="true" width="120" />
                        <el-table-column prop="sex" label="性别" :show-overflow-tooltip="true" width="120" />
                        <el-table-column prop="nationvalue" label="民族" :show-overflow-tooltip="true" width="120" />
                        <el-table-column prop="phone" label="电话" :show-overflow-tooltip="true" width="120" />
                        <el-table-column prop="cartType" label="证件类型" :show-overflow-tooltip="true" width="120" />
                        <el-table-column prop="cart" label="证件号码" :show-overflow-tooltip="true" width="120" />
                        <el-table-column prop="money" label="余额" :show-overflow-tooltip="true" width="120" />
                        <el-table-column prop="address" label="地址" :show-overflow-tooltip="true" width="150">
                        </el-table-column>
                        <el-table-column label="注册时间" width="140" :show-overflow-tooltip="true">
                            <template slot-scope="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="150" fixed="right">
                            <template slot-scope="scope">
                                <el-dropdown split-button size="mini">
                                    <span @click="handleClick(scope.row)" style="color:#409EFF ;">查看</span>
                                    <el-dropdown-menu slot="dropdown">
                                        <!-- <el-dropdown-item>
                                            <span @click="edit(scope.row)" style="color:#409EFF ;">编辑</span>
                                        </el-dropdown-item> -->
                                        <!-- <el-dropdown-item>
                                            <span @click="present(scope.row)" style="color:#409EFF ;">赠送优惠券</span>
                                        </el-dropdown-item> -->
                                        <el-dropdown-item>
                                            <span @click="deleteone(scope.row)" style="color:#ff4040 ;">删除</span>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="this.pageInfo.page" :page-sizes="[10, 20, 30, 50]"
                        :page-size="this.pageInfo.pageSize" layout="->,total, sizes, prev, pager, next, jumper"
                        :total="this.pageInfo.total">
                    </el-pagination>
                    <!-- 查看弹窗框 -->
                    <el-dialog title="用户信息" :visible.sync="dialogVisible" width="50%" style="margin-top: 15vh;">
                        <el-descriptions title="" direction="horizontal" :column="2" border :contentStyle="rowCenter"
                            :labelStyle="rowCenter">
                            <el-descriptions-item label="姓名">{{formData.name}}</el-descriptions-item>
                            <el-descriptions-item label="编号">{{formData.id}}</el-descriptions-item>
                            <el-descriptions-item label="性别">{{formData.sex}}</el-descriptions-item>
                            <el-descriptions-item label="证件类型">{{formData.cartType}}</el-descriptions-item>
                            <el-descriptions-item label="民族">{{formData.nationvalue}}</el-descriptions-item>
                            <el-descriptions-item label="证件号码">{{formData.cart}}</el-descriptions-item>
                            <el-descriptions-item label="手机号">{{formData.phone}}</el-descriptions-item>
                            <el-descriptions-item label="余额">{{formData.money}}</el-descriptions-item>
                            <el-descriptions-item label="注册时间">{{formData.date}}</el-descriptions-item>
                            <el-descriptions-item label="用户地址">{{formData.address}}</el-descriptions-item>
                        </el-descriptions>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="warning"
                                v-if="formData.name == null || formData.sex == null|| formData.cartType == null||
                             formData.nationvalue == null|| formData.cart ==null|| formData.phone ==null|| formData.address ==null"
                                @click="dialogVisible3 = true" size="small">提醒用户</el-button>
                            <el-button type="primary" @click="dialogVisible = false" size="small">关闭</el-button>
                        </div>
                    </el-dialog>
                    <!-- 是否提醒用户 -->
                    <el-dialog title="提示！" :visible.sync="dialogVisible3" width="20%" style="margin-top: 30vh;">
                        <span>是否提醒用户信息填写完整</span>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="dialogVisible3 = false" size="small">取消</el-button>
                            <el-button type="primary" @click="notice" size="small">确定</el-button>
                        </div>
                    </el-dialog>
                    <!-- 编辑弹窗框 -->
                    <el-dialog title="用户信息" :visible.sync="dialogVisible2" width="50%" style="margin-top: 8vh;">
                        <el-descriptions title="" direction="horizontal" :column="2" border :contentStyle="rowCenter"
                            :labelStyle="rowCenter">
                            <el-descriptions-item label="编号">
                                <el-input v-model="formData.id" autocomplete="off"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="民族">
                                <el-select v-model="formData.nationvalue" filterable placeholder="请选择民族"
                                    class="add-nation-input">
                                    <el-option v-for="item in nationList" :key="item.value" :label="item.info"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-descriptions-item>
                            <el-descriptions-item label="姓名">
                                <el-input v-model="formData.name" autocomplete="off"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="性别">
                                <el-radio-group v-model="formData.sex">
                                    <el-radio label="男"></el-radio>
                                    <el-radio label="女"></el-radio>
                                    <el-radio label="保密"></el-radio>
                                </el-radio-group>
                            </el-descriptions-item>
                            <el-descriptions-item label="手机号">
                                <el-input v-model="formData.phone" autocomplete="off"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="证件类型">
                                <el-select v-model="formData.cartType" placeholder="请选择证件类型">
                                    <el-option label="居民身份证" value="居民身份证"></el-option>
                                    <el-option label="护照" value="护照"></el-option>
                                    <el-option label="户口本" value="户口本"></el-option>
                                    <el-option label="驾驶证" value="驾驶证"></el-option>
                                    <el-option label="其他" value="其他"></el-option>
                                </el-select>
                            </el-descriptions-item>
                            <el-descriptions-item label="证件号码">
                                <el-input v-model="formData.cart" autocomplete="off"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="注册时间">
                                <el-date-picker v-model="formData.date" value-format="yyyy-MM-dd" type="date"
                                    placeholder="注册时间">
                                </el-date-picker>
                            </el-descriptions-item>
                            <el-descriptions-item label="用户地址">
                                <el-input v-model="formData.address" autocomplete="off"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="余额">
                                {{formData.money}}
                            </el-descriptions-item>
                        </el-descriptions>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible2 = false">取 消</el-button>
                            <el-button type="primary" @click="revise">确 定</el-button>
                        </div>
                    </el-dialog>
                    <!-- 赠送优惠券弹框 -->
                    <!-- <el-dialog title="赠送优惠券" :visible.sync="dialogVisible4" width="23%" style="margin-top: 20vh;">
                        <el-form :model="presentData">
                            <el-form-item label="优惠券类型" :label-width="presentLabelWidth">
                                <el-select v-model="presentData.present" filterable placeholder="请选择优惠券"
                                    class="add-nation-input">
                                    <el-option v-for="item in presents" :key="item.value" :label="item.info"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="赠送数量" :label-width="presentLabelWidth">
                                <el-input v-model="presentData.number" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible4 = false" size="small">取 消</el-button>
                            <el-button type="primary" @click="presentTrue" size="small">确 定</el-button>
                        </div>
                    </el-dialog> -->
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    import { userInformationAPI, deleteuserAPI, usersinofAPI } from "@/api";
    export default {
        data() {
            return {
                users: {
                    id: '',
                    info: 1,
                    // notpay: ''
                },
                idData: [],
                presentData: {
                    present: '',
                    number: ''
                },
                presents: [  // 优惠券类型
                    {
                        id: 1,
                        info: "起步价卷",
                        value: 1,
                    },
                    {
                        id: 2,
                        info: "免单卷",
                        value: 2,
                    }, {
                        id: 3,
                        info: "半折卷",
                        value: 3,
                    }, {
                        id: 4,
                        info: "八折卷",
                        value: 4,
                    },
                ],
                rowCenter: {
                    "text-align": "center"
                },
                presentLabelWidth: '100px',
                formLabelWidth: '80px',
                formData: {
                    cart: '',
                    nationvalue: '',
                    cartType: '',
                    id: '',
                    name: '',
                    time: '',
                    sex: '',
                    phone: '',
                    money: '',
                    address: ''
                },
                dialogVisible4: false,
                dialogVisible3: false,
                dialogVisible2: false,
                dialogVisible: false,
                isCollapse: false,
                searchModel: { time: '', name: '', id: '' },
                pageInfo: { page: 1, pageSize: 10, total: 0 },
                tableData: [],
                nationList: [
                    {
                        id: 1,
                        info: "汉族",
                        value: 1,
                    },
                    {
                        id: 2,
                        info: "壮族",
                        value: 2,
                    },
                    {
                        id: 3,
                        info: "满族",
                        value: 3,
                    },
                    {
                        id: 4,
                        info: "回族",
                        value: 4,
                    },
                    {
                        id: 5,
                        info: "苗族",
                        value: 5,
                    },
                    {
                        id: 6,
                        info: "维吾尔族",
                        value: 6,
                    },
                    {
                        id: 7,
                        info: "土家族",
                        value: 7,
                    },
                    {
                        id: 8,
                        info: "彝族",
                        value: 8,
                    },
                    {
                        id: 9,
                        info: "蒙古族",
                        value: 9,
                    },
                    {
                        id: 10,
                        info: "藏族",
                        value: 10,
                    },
                    {
                        id: 11,
                        info: "布依族",
                        value: 11,
                    },
                    {
                        id: 12,
                        info: "侗族",
                        value: 12,
                    },
                    {
                        id: 13,
                        info: "瑶族",
                        value: 13,
                    },
                    {
                        id: 14,
                        info: "朝鲜族",
                        value: 14,
                    },
                    {
                        id: 15,
                        info: "白族",
                        value: 15,
                    },
                    {
                        id: 16,
                        info: "哈尼族",
                        value: 16,
                    },
                    {
                        id: 17,
                        info: "哈萨克族",
                        value: 17,
                    },
                    {
                        id: 18,
                        info: "黎族",
                        value: 18,
                    },
                    {
                        id: 19,
                        info: "傣族",
                        value: 19,
                    },
                    {
                        id: 20,
                        info: "畲族",
                        value: 20,
                    },
                    {
                        id: 21,
                        info: "傈僳族",
                        value: 21,
                    },
                    {
                        id: 22,
                        info: "仡佬族",
                        value: 22,
                    },
                    {
                        id: 23,
                        info: "东乡族",
                        value: 23,
                    },
                    {
                        id: 24,
                        info: "高山族",
                        value: 24,
                    },
                    {
                        id: 25,
                        info: "拉祜族",
                        value: 25,
                    },
                    {
                        id: 26,
                        info: "水族",
                        value: 26,
                    },
                    {
                        id: 27,
                        info: "佤族",
                        value: 27,
                    },
                    {
                        id: 28,
                        info: "纳西族",
                        value: 28,
                    },
                    {
                        id: 29,
                        info: "羌族",
                        value: 29,
                    },
                    {
                        id: 30,
                        info: "土族",
                        value: 30,
                    },
                    {
                        id: 31,
                        info: "仫佬族",
                        value: 31,
                    },
                    {
                        id: 32,
                        info: "锡伯族",
                        value: 32,
                    },
                    {
                        id: 33,
                        info: "柯尔克孜族",
                        value: 33,
                    },
                    {
                        id: 34,
                        info: "达斡尔族",
                        value: 34,
                    },
                    {
                        id: 35,
                        info: "景颇族",
                        value: 35,
                    },
                    {
                        id: 36,
                        info: "毛南族",
                        value: 36,
                    },
                    {
                        id: 37,
                        info: "撒拉族",
                        value: 37,
                    },
                    {
                        id: 38,
                        info: "布朗族",
                        value: 38,
                    },
                    {
                        id: 39,
                        info: "塔吉克族",
                        value: 39,
                    },
                    {
                        id: 40,
                        info: "阿昌族",
                        value: 40,
                    },
                    {
                        id: 41,
                        info: "普米族",
                        value: 41,
                    },
                    {
                        id: 42,
                        info: "鄂温克族",
                        value: 42,
                    },
                    {
                        id: 43,
                        info: "怒族",
                        value: 43,
                    },
                    {
                        id: 44,
                        info: "京族",
                        value: 44,
                    },
                    {
                        id: 45,
                        info: "基诺族",
                        value: 45,
                    },
                    {
                        id: 46,
                        info: "德昂族",
                        value: 46,
                    },
                    {
                        id: 47,
                        info: "保安族",
                        value: 47,
                    },
                    {
                        id: 48,
                        info: "俄罗斯族",
                        value: 48,
                    },
                    {
                        id: 49,
                        info: "裕固族",
                        value: 49,
                    },
                    {
                        id: 50,
                        info: "乌孜别克族",
                        value: 50,
                    },
                    {
                        id: 51,
                        info: "门巴族",
                        value: 51,
                    },
                    {
                        id: 52,
                        info: "鄂伦春族",
                        value: 52,
                    },
                    {
                        id: 53,
                        info: "独龙族",
                        value: 53,
                    },
                    {
                        id: 54,
                        info: "塔塔尔族",
                        value: 54,
                    },
                    {
                        id: 55,
                        info: "赫哲族",
                        value: 55,
                    },
                    {
                        id: 56,
                        info: "珞巴族",
                        value: 56,
                    },
                ],
            }
        },
        created() {
            this.init()
        },
        methods: {
            async init() {
                const { data: res } = await userInformationAPI();
                if (res.status == 0) {
                    this.tableData = res.data
                    this.pageInfo.total = res.data.length
                }
            },
            async showusers() {
                const { data: res } = await usersinofAPI(this.users);
                if (res.status == 0) {
                    this.$message({
                        showClose: true,
                        message: '提醒成功!',
                        type: 'success',
                        offset: 60
                    });
                }
                console.log(res)
            },
            // async usersinof() {
            //     const { data: res } = await userInformationAPI();
            //     if (res.status == 0) {
            //         res.data.forEach(item => {
            //             if (item.name == null || item.name == '') {
            //                 this.users.id = item.id
            //                 this.users.info = 1
            //                 this.users.notpay = 1
            //                 this.showusers()
            //             }
            //         });
            //         console.log(this.users)
            //     }
            // },
            //删除单个
            async deleteone(row) {
                const { data: res } = await deleteuserAPI(row.id);
                if (res.status == 0) {
                    this.$message({
                        showClose: true,
                        message: '删除成功!',
                        type: 'success',
                        offset: 60
                    });
                    this.init()
                } else {
                    this.$message.error('删除失败!');
                }
                // this.deletes()
            },
            //批量删除
            async deletes() {
                if (this.idData.length == 0) {
                    this.$message({
                        showClose: true,
                        message: '请选择要删除的数据!',
                        type: 'warning',
                        offset: 60
                    });
                } else {
                    let id = this.idData.join(',')
                    const { data: res } = await deleteuserAPI(id);
                    if (res.status == 0) {
                        this.$message({
                            showClose: true,
                            message: '删除成功!',
                            type: 'success',
                            offset: 60
                        });
                        this.init()
                    } else {
                        this.$message.error('删除失败!');
                    }
                }

            },
            //刷新
            async refresh() {
                const { data: res } = await userInformationAPI();
                if (res.status == 0) {
                    this.tableData = res.data
                    this.pageInfo.total = res.data.length
                    this.$message({
                        showClose: true,
                        message: '刷新成功!',
                        type: 'success',
                        offset: 60
                    });
                } else {
                    this.$message.error('刷新失败!');
                }
            },
            // // 优惠券赠送确定
            // presentTrue() {
            //     if (this.presentData.present == '') {
            //         this.$notify({
            //             title: '警告',
            //             message: '请选择优惠券类型！',
            //             type: 'warning',
            //             duration: 1500
            //         });
            //     } else if (this.presentData.number == '') {
            //         this.$notify({
            //             title: '警告',
            //             message: '请选择赠送数量！',
            //             type: 'warning',
            //             duration: 1500
            //         });
            //     } else {
            //         this.dialogVisible4 = false
            //     }

            // },
            // 用户信息修改确定
            revise() {
                this.dialogVisible2 = false
            },
            // 提醒用户信息填写完整
            notice() {
                this.showusers()
                this.dialogVisible3 = false
                this.dialogVisible = false
            },
            shrinkMenu() {
                this.isCollapse = !this.isCollapse;
            },
            async selects(key, keyPath) {
                this.tableData = []
                const { data: res } = await userInformationAPI();
                if (res.status == 0) {
                    if (key == '1-1' || key == '2-1') {//全部
                        this.tableData = res.data
                        this.pageInfo.total = res.data.length
                    } else if (key == '1-2') {//男
                        res.data.forEach(item => {
                            if (item.sex == '男') {
                                this.tableData.push(item)

                            }
                        });
                        this.pageInfo.page = 1
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '1-3') {//女
                        res.data.forEach(item => {
                            if (item.sex == '女') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '1-4') {//保密
                        res.data.forEach(item => {
                            if (item.sex == '保密') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.page = 1
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '2-2') {//居民身份证
                        res.data.forEach(item => {
                            if (item.cartType == '居民身份证') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.page = 1
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '2-3') {//护照
                        res.data.forEach(item => {
                            if (item.cartType == '护照') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.page = 1
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '2-4') {//户口本
                        res.data.forEach(item => {
                            if (item.cartType == '户口本') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.page = 1
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '2-5') {//驾驶证
                        res.data.forEach(item => {
                            if (item.cartType == '驾驶证') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.page = 1
                        this.pageInfo.total = this.tableData.length
                    }
                    console.log(key, keyPath);
                }
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            // // 赠送优惠券
            // present(row) {
            //     this.dialogVisible4 = true
            // },
            // //编辑
            // edit(row) {
            //     this.formData.id = row.id
            //     this.formData.date = row.date
            //     this.formData.name = row.name
            //     this.formData.sex = row.sex
            //     this.formData.nationvalue = row.nationvalue
            //     this.formData.phone = row.phone
            //     this.formData.cartType = row.cartType
            //     this.formData.cart = row.cart
            //     this.formData.money = row.money
            //     this.formData.address = row.address
            //     this.dialogVisible2 = true
            //     console.log(row)
            // },
            //查看
            handleClick(row) {
                this.formData.id = row.id
                this.formData.date = row.date
                this.formData.name = row.name
                this.formData.sex = row.sex
                this.formData.nationvalue = row.nationvalue
                this.formData.phone = row.phone
                this.formData.cartType = row.cartType
                this.formData.cart = row.cart
                this.formData.money = row.money
                this.formData.address = row.address
                this.dialogVisible = true
                this.users.id = row.id
            },
            //重置
            resetForm() {
                this.searchModel.name = ''
                this.searchModel.id = ''
                this.init()
            },
            //查询
            async queryForm() {
                this.tableData = []
                const { data: res } = await userInformationAPI();
                if (res.status == 0) {
                    if (this.searchModel.name == '' && this.searchModel.id !== '') {
                        res.data.forEach(item => {
                            if (item.id == this.searchModel.id) {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.page = 1
                        this.pageInfo.total = this.tableData.length
                    } else if (this.searchModel.name !== '' && this.searchModel.id == '') {
                        res.data.forEach(item => {
                            if (item.name == this.searchModel.name) {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.page = 1
                        this.pageInfo.total = this.tableData.length
                    } else if (this.searchModel.name !== '' && this.searchModel.id !== '') {
                        res.data.forEach(item => {
                            if (item.name == this.searchModel.name && item.id == this.searchModel.id) {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.page = 1
                        this.pageInfo.total = this.tableData.length
                    } else {
                        this.pageInfo.page = 1
                        this.tableData = res.data
                        this.pageInfo.total = res.data.length
                    }
                }
                console.log(this.tableData)
            },
            handleSelectionChange(val) {
                this.idData = []
                val.forEach(item => {
                    this.idData.push(item.id)
                })
                console.log(this.idData)
            },
            handleSizeChange(val) {
                this.pageInfo.pageSize = val
                this.pageInfo.page = 1
            },
            handleCurrentChange(val) {
                this.pageInfo.page = val
            }
        },
    }
</script>
<style scoped>
    /deep/ .el-dialog__footer {
        padding: 10px;
    }

    /deep/ .el-dialog__body {
        padding: 0px 20px;
    }

    .tops>div {
        display: inline-block;
    }

    .box>.el-container {
        padding: 20px !important;
        width: 100% !important;
        height: 93% !important;
    }

    .tops {
        width: 100%;
        height: 7%;
        background-color: #fff;
    }

    .box {
        height: 100%;
        width: 100%;
    }

    .el-menu-item {
        padding-left: 60px !important;
    }

    /deep/ .el-menu-item,
    .el-submenu__title {
        height: 30px !important;
        line-height: 30px !important;
        list-style: none;
    }

    /deep/ .el-menu-item-group__title {
        padding: 0 !important;
    }

    .el-menu {
        height: 100%;
        border-right-width: 0;
    }

    .el-menu-vertical:not(.el-menu--collapse) {
        width: 200px;
    }

    .shrink {
        position: absolute;
        top: 50%;
        right: -25px;
        transform: translateY(-50%);
        width: 23px;
        height: 35px;
        border: 1px solid #b3c0d1;
        background: #b3c0d1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        cursor: pointer;
        /* z-index: 9999; */
    }

    .el-aside {
        /* width: 15% !important;
        height: 98%;
        background-color: #fff;*/
        margin: 25px 0 0 0 !important;
        /* 左侧不设置宽度 */
        overflow: visible !important;
        width: auto !important;
        height: 95.6%;
        background: #d3dce6;
        position: relative;
    }

    /* .el-card__body, */
    .el-main {
        padding: 25px 0 0 25px !important;
        height: 100%;
        /* flex关键代码，让右侧占满剩余宽度 */
        flex: 1;
        background: #e9eef3;
        box-sizing: border-box;
    }

    .el-header {
        padding-top: 10px;

        background-color: #fff;
    }

    /* .el-menu--collapse {
        width: 1px !important;
    } */
    .el-container>.el-container {
        height: 80%;
    }

    .el-pagination {
        background-color: white !important;
        /* margin-top: 1% !important; */
        /* float: right; */
    }
</style>